<template>
  <div v-loading="loading">
    <vab-card v-if="routeQuery.from == 'update'">
      <template class="flex_sb">
        <div class="leve_title">产品属性更新</div>
        <div class="flex_just_end">
          <el-button size="small" @click="handleClick('back')">
            取消
          </el-button>
          <el-button size="small" type="primary" @click="handleClick('submit')">
            提交
          </el-button>
        </div>
      </template>
    </vab-card>
    <vab-card v-else>
      <template class="flex_sb">
        <div class="leve_title">产品详情</div>
        <div class="flex_just_end">
          <el-button size="small" @click="router.back()">
            返回
          </el-button>
        </div>
      </template>
    </vab-card>
    <vab-card v-if="searchForm">
      <template #header >
        <div class="flex_sb">
          <div class="leve2_title">产品属性</div>
        </div>
      </template>
      <template #default>
        <el-form
          :ref="(el) => searchFormRef = el"
          :model="searchForm"
          label-width="80px"
          label-position="left"
          class="form_search"
        >
          <!-- 表单 -->
          <el-row :gutter="24" v-if="routeQuery.from == 'update' && !loading">
            <el-col
              v-for="(item, i) in _DetailSearchFor"
              :key="i"
              :xs="12"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="6"
            >
              <el-form-item
                v-if="item.type == 'select'"
                :label="item.label"
                :prop="searchForm[item.prop]"
              >
                <el-select
                  clearable
                  class="width_100 height_auto"
                  :multiple="item.multiple"
                  :filterable="item.multiple"
                  v-model="searchForm[item.prop]"
                >
                  <el-option
                    clearable
                    v-for="(jtem, j) in selectOptions(item.prop)"
                    :key="jtem.value"
                    :label="jtem.label"
                    :value="jtem.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="item.type == 'input'"
                :label="item.label"
                :prop="searchForm[item.prop]"
              >
                <VabInputForm v-model="searchForm[item.prop]"/>
              </el-form-item>
              <el-form-item
                v-if="item.detailProps == 'is_examine_boo' || item.detailProps == 'is_master_boo'"
                :label="item.label"
                :prop="searchForm[item.detailProps]"
              >
                <el-radio-group v-model="searchForm[item.detailProps]">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>

               <!-- 一级类目 -->
               <el-form-item
                v-if="item.type == 'select_1'"
                :label="item.label"
                :prop="item.prop"
              >
                <el-select
                  clearable
                  class="width_100 height_auto"
                  v-model="searchForm[item.prop]"
                  @change="(value: string) => {
                    _ProductSearchClass(value)
                  }"
                >
                  <el-option
                    clearable
                    v-for="(jtem, j) in selectOptions(item.prop)"
                    :key="jtem.value"
                    :label="jtem.label"
                    :value="jtem.value"
                  />
                </el-select>
              </el-form-item>
              <!-- 二级类目 -->
              <el-form-item
                v-if="item.type == 'select_2'"
                :label="item.label"
                :prop="item.prop"
              >
                <el-select
                  clearable
                  class="width_100 height_auto"
                  v-model="searchForm[item.prop]"
                >
                  <el-option
                    clearable
                    v-for="(jtem, j) in classTwoList"
                    :key="jtem.value"
                    :label="jtem.label"
                    :value="jtem.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 详情 -->
          <el-row :gutter="24" v-else>
            <el-col
              v-for="(item, i) in _DetailSearchFor"
              :key="i"
              :xs="12"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="6"
            >
              <div class="detail-mode">
                <span class="label">{{ item.label }}</span>
                <span class="text" v-if="item.type == 'switch'">
                  {{ searchForm[item.detailProps] == 0 ? '--' : (searchForm[item.detailProps] == '1' ? '是' : '否') }}
                </span>
                <span class="text" v-else>
                  {{ _FieldFormat2(searchForm[item.detailProps]) || '--' }}
                </span>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </vab-card>
    <vab-card>
      <template #header>
        <div class="leve2_title">产品图</div>
      </template>
      <template #default v-loading="loading">
        <vab-upload
          drag
          ref="uploadPictureRef"
          :file-list="fileList"
          v-if="routeQuery.from == 'update' && !loading"
          @delete="handleDelete"
        />
        <Picture v-if="routeQuery.from == 'detail' && !loading" :file-list="fileList"/>
      </template>
    </vab-card>
    <vab-card class="detail" v-if="searchForm">
      <template #header>
        <div class="leve2_title">
          基础信息
        </div>
      </template>
      <el-row :gutter="24">
        <el-col el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
          <el-descriptions size="large" :column="1">
            <el-descriptions-item label="品牌">
              {{ _FieldFormat(searchForm?.assistant_name) }}
            </el-descriptions-item>
            <el-descriptions-item label="规格型号">
              {{ _FieldFormat(searchForm?.specification) }}
            </el-descriptions-item>
            <el-descriptions-item label="长">
              {{ _FieldFormat(searchForm?.length) }}
            </el-descriptions-item>
            <el-descriptions-item label="毛重">
              {{ _FieldFormat(searchForm?.gross_weight) }}
            </el-descriptions-item>
            <el-descriptions-item label="同步时间">
              {{ _FieldFormat(searchForm?.task_at) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
          <el-descriptions size="large" :column="1">
            <el-descriptions-item label="物料编码">
              {{ _FieldFormat(searchForm?.number) }}
            </el-descriptions-item>
            <el-descriptions-item label="基本单位">
              {{ _FieldFormat(searchForm?.unit_name) }}
            </el-descriptions-item>
            <el-descriptions-item label="宽">
              {{ _FieldFormat(searchForm?.width) }}
            </el-descriptions-item>
            <el-descriptions-item label="净重">
              {{ _FieldFormat(searchForm?.net_weight) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
          <el-descriptions size="large" :column="1">
            <el-descriptions-item label="物料名称">
              <span :title="searchForm?.name"> {{ _FieldFormat(searchForm?.name) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="标准零售价">
              {{ _FieldFormat(searchForm?.retail_price) }}
            </el-descriptions-item>
            <el-descriptions-item label="高">
              {{ _FieldFormat(searchForm.height) }}
            </el-descriptions-item>
            <el-descriptions-item label="创建人">
              {{ _FieldFormat(searchForm?.create_user_name) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
          <el-descriptions size="large" :column="1">
            <el-descriptions-item label="条码">
              {{ _FieldFormat(searchForm?.barcode) }}
            </el-descriptions-item>
            <el-descriptions-item label="底价">
              {{ _FieldFormat(searchForm?.base_price, 'money') }}
            </el-descriptions-item>
            <el-descriptions-item label="体积">
              {{ _FieldFormat(searchForm?.volume) }}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ _FieldFormat(searchForm?.created_at) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </vab-card>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { DetailSearchFor, InfoSearchSelect } from './components/tools'
import { getProductInfo, getProductSearch, productDeleteImg, productSearchClass, productUpdate } from '~/src/api/dms/product';
import { FieldFormat } from '~/src/utils/utils';
import Picture from './components/Picture.vue'

defineOptions({
  name: 'ProductDetail',
})

/**
 * @var
 */

const route = useRoute()
const router = useRouter()
const uploadPictureRef = ref<any>()
const { id, type, from } = route.query
const routeQuery = reactive<any>(route.query)
const searchFormRef = ref<any>()
let searchForm = ref<any>(null)
let fileList = ref<any>([])
let selectSearch = ref<any>(null)
const loading = ref(false)
const _DetailSearchFor = ref<any>(DetailSearchFor)
let classTwoList = ref<any>([])
/**
 * @method
 */

const selectOptions = (value: string) => {
  if (JSON.stringify(selectSearch.value) == 'null') return
  return InfoSearchSelect(selectSearch.value, value)
}
// 字段格式化
const _FieldFormat = FieldFormat
const _FieldFormat2 = (value: string) => {
  if (value == '0') return '否'
  if (value == '1') return '是'
  return value
}

const handleClick = (value: string) => {
  if (value == 'back') {

    ElMessageBox.confirm(
      '页面操作未完成，确定取消？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(() => {
        router.back()
      })
      .catch(() => {

      })
    return
  }

  // 提交
  const list = uploadPictureRef.value?.list || []
  let image = []
  if (list.length) {
    image = list.map((item: any) => {
      return {
        name: item.name || '',
        id: item.id || '',
        img_url: item?.response ? item?.response : item.img_url
      }
    })
  }
  productUpdate({
    id: searchForm.value.id,
    class_id1: searchForm.value.class_id1,
    class_id2: searchForm.value.class_id2,
    xl_id: searchForm.value.xl_id,
    large_category_id: searchForm.value.large_category_id,
    is_examine: searchForm.value.is_examine_boo,
    is_master: searchForm.value.is_master_boo,
    box_specs: searchForm.value.box_specs,
    image
  }).then(res => {
    ElMessage({
      message: '提交成功',
      type: 'success',
    })
    router.back()
  })
}

const handleDelete = (row: any) => {
  productDeleteImg({ id: row.id }).then(res => {
    ElMessage({
      message: '删除成功',
    })
  })
}

const _GetProductInfo = async () => {
  loading.value = true
  try {
    const res = await getProductInfo({ id, type })
    res.data.is_examine_boo = res.data.is_examine
    res.data.is_master_boo = res.data.is_master
    searchForm.value = res.data
    fileList.value = res.data.image.map((item: any) => {
      return {
        ...item,
        url: item.img_url
      }
    })

    await _ProductSearchClass([res.data.class_id1])

    loading.value = false
  } catch (error) {
    console.log(error);
  }
}
const _GetProductSearch = async () => {
  try {
    const res = await getProductSearch()
    // res.data.brand.push({ entry_id: '', name: '空' })
    // res.data.class_one.push({ id: '', data_title: '空' })
    // res.data.class_two.push({ id: '', data_title: '空' })
    // res.data.series.push({ id: '', data_title: '空' })
    // res.data.category.push({ id: '', data_title: '空' })
    selectSearch.value = res.data

  } catch (error) { }
}

// 二级分类
const _ProductSearchClass = async (class_id: any) => {
  try {
    const res = await productSearchClass({ class_id })
    classTwoList = res.data.map((item: any) => {
      return {
        value: item.id,
        label: item.data_title
      }
    })
  } catch (error) {

  }
}


onMounted(() => {
  if (!routeQuery.id) return
  _GetProductInfo()
  _GetProductSearch()
})
</script>

<style lang="scss" scoped>
.detail {
  :deep() {
    .el-descriptions__cell {
      display: flex;
      align-items: center;
    }

    .el-descriptions__label {
      display: inline-block;
      width: 70px;
      text-align: left;
      white-space: nowrap;
    }

    .el-descriptions__content {
      display: inline-block;
      text-align: left;
      flex: 1;
      -webkit-line-clamp: 1;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
